<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<select id="province">
    <option>--请选择--</option>
</select>
<select id="city">
    <option>--请选择--</option>
</select>
<script type="text/javascript">
    var arr=new Array()
    arr["北京市"]=["海淀区","昌平区","顺义区","朝阳区","西城区","石景山区"];
    arr["黑龙江省"]=["哈尔滨市","齐齐哈尔市","双鸭山市","大庆市","黑河市"];
    arr["河北省"]=["保定市","石家庄市","承德市","邯郸市","廊坊市"];
    arr["山西省"]=["大同","太原","晋城"];
//把省遍历一遍，然后把省追加在province里（内部追加append）
    for(var i in arr){
        $("#province").append("<option>"+i+"</option>")
    }
    $("#province").change(function () {
        $("#city").empty()
        var province = $(this).val()
        for(var i in arr[province]){
            $("#city").append("<option>"+arr[province][i]+"</option>")
        }


    })
</script>
</body>
</html>